// pages/prize/prize.js
const app = getApp()
Page({

    /**
     * 页面的初始数据
     */
    data: {

        wechat: "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJUsIRbzibSNLumlZXQuIwZPBic1h4IDStCKQWJGMZFXYVMU2gic3HXB2FIanWDz5TqfoiczJhw33F2Lg/132",
        quan: "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJUsIRbzibSNLumlZXQuIwZPBic1h4IDStCKQWJGMZFXYVMU2gic3HXB2FIanWDz5TqfoiczJhw33F2Lg/132",
        code: "E7AI98",
        inputValue: "",
        maskHidden: false,
        name: "",
        touxiang: "",
        code: "E7A93C"
    },
    //获取输入框的值
    bindKeyInput: function (e) {
        this.setData({
            inputValue: e.detail.value
        })
    },
    //点击提交按钮
    btnclick: function () {
        var text = this.data.inputValue
        wx.showToast({
            title: text,
            icon: 'none',
            duration: 2000
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var that = this;
        wx.getUserInfo({
            success: res => {
                console.log(res.userInfo, "huoqudao le ")
                this.setData({
                    name: res.userInfo.nickName,
                })
                wx.downloadFile({
                    url: res.userInfo.avatarUrl, //仅为示例，并非真实的资源
                    success: function (res) {
                        // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
                        if (res.statusCode === 200) {
                            console.log(res, "reererererer")
                            that.setData({
                                touxiang: res.tempFilePath
                            })
                        }
                    }
                })
            }
        })

    },
    //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
    createNewImg: function () {
        var that = this;
        var context = wx.createCanvasContext('mycanvas');
        context.setFillStyle("#F2A635");//设置填充色
        context.fillRect(0, 0, 375, 667);//画一个长375宽667的矩形
        var path = "/imgse/DB93E3B40EEF.png";//模版图
        //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
        //不知道是什么原因，手机环境能正常显示
        context.drawImage(path, 0, 0, 375, 183);//绘制的图片资源
        var path1 = that.data.touxiang;
        console.log(path1, "path1")
        //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
        var path2 = "/imgse/32788E3E295.png";//用户头像背景
        var path3 = "/imgse/2BDA8F27D0E3.png";//分享码背景
        var path4 = "/imgse/kuang.png";//扫码描述框
        var path5 = "/imgse/qrcode.jpg";//小程序二维码
        context.drawImage(path2, 126, 186, 120, 120);
        //不知道是什么原因，手机环境能正常显示
        // context.save(); // 保存当前context的状态

        var name = that.data.name;
        //绘制名字
        context.setFontSize(24);
        context.setFillStyle('#333333');
        context.setTextAlign('center');
        context.fillText(name, 185, 340);
        context.stroke();
        //绘制一起吃面标语
        context.setFontSize(14);
        context.setFillStyle('#333333');
        context.setTextAlign('center');
        context.fillText("邀请你一起去吃面", 185, 370);
        context.stroke();
        //绘制验证码背景
        context.drawImage(path3, 48, 390, 280, 84);
        //绘制code码
        context.setFontSize(40);
        context.setFillStyle('#ffe200');
        context.setTextAlign('center');
        context.fillText(that.data.code, 185, 435);
        context.stroke();
        //绘制左下角文字背景图
        context.drawImage(path4, 25, 520, 184, 82);
        context.setFontSize(12);
        context.setFillStyle('#333');
        context.setTextAlign('left');
        context.fillText("进入小程序输入朋友的邀请", 35, 540);
        context.stroke();
        context.setFontSize(12);
        context.setFillStyle('#333');
        context.setTextAlign('left');
        context.fillText("码，朋友和你各自获得通用", 35, 560);
        context.stroke();
        context.setFontSize(12);
        context.setFillStyle('#333');
        context.setTextAlign('left');
        context.fillText("优惠券1张哦~", 35, 580);
        context.stroke();
        //绘制右下角扫码提示语
        context.drawImage(path5, 248, 528, 90, 90);
        //绘制头像
        context.arc(186, 246, 50, 0, 2 * Math.PI) //画出圆
        context.strokeStyle = "#ffe200";
        context.clip(); //裁剪上面的圆形
        context.drawImage(path1, 136, 196, 100, 100); // 在刚刚裁剪的园上画图
        context.draw();
        //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
        setTimeout(function () {
            wx.canvasToTempFilePath({
                canvasId: 'mycanvas',
                success: function (res) {
                    var tempFilePath = res.tempFilePath;
                    that.setData({
                        imagePath: tempFilePath,
                        canvasHidden: true
                    });
                },
                fail: function (res) {
                    console.log(res);
                }
            });
        }, 300);
    },
    //点击保存到相册
    baocun: function () {
        var that = this
        wx.saveImageToPhotosAlbum({
            filePath: that.data.imagePath,
            success(res) {
                wx.showModal({
                    content: '图片已保存到相册，赶紧晒一下吧~',
                    showCancel: false,
                    confirmText: '好的',
                    confirmColor: '#333',
                    success: function (res) {
                        if (res.confirm) {
                            console.log('用户点击确定');
                            /* 该隐藏的隐藏 */
                            that.setData({
                                maskHidden: false
                            })
                        }
                    }, fail: function (res) {
                        console.log(11111)
                    }
                })
            }
        })
    },
    //点击生成
    formSubmit: function (e) {
        var that = this;
        this.setData({
            maskHidden: false
        });
        wx.showToast({
            title: '装逼中...',
            icon: 'loading',
            duration: 1000
        });
        setTimeout(function () {
            wx.hideToast()
            that.createNewImg();
            that.setData({
                maskHidden: true
            });
        }, 1000)
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        var that = this;
        wx.getUserInfo({
            success: res => {
                console.log(res.userInfo, "huoqudao le ")
                this.setData({
                    name: res.userInfo.nickName,
                })
                wx.downloadFile({
                    url: res.userInfo.avatarUrl, //仅为示例，并非真实的资源
                    success: function (res) {
                        // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
                        if (res.statusCode === 200) {
                            console.log(res, "reererererer")
                            that.setData({
                                touxiang: res.tempFilePath
                            })
                        }
                    }
                })
            }
        })
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function (res) {
        return {
            title: "这个是我分享出来的东西",
            success: function (res) {
                console.log(res, "转发成功")
            },
            fail: function (res) {
                console.log(res, "转发失败")
            }
        }
    }
})